<template>
	<view class="main-content">
		<view class="title-bg">
			<view v-if="isExpirationTime" class="expirationTime-card">
				<view class="straight-card-userinfo">
					<image class="headPortrait" :src="imgPath + userinfo.user.avatar" mode="aspectFill"></image>
					<view class="userName-view"><text class="userName">{{userinfo.user.userName}}</text>
						<view class="straight-card-subhead" v-if="userinfo.cardName">{{userinfo.cardName}}</view>
					</view>
					<text class="straight-card-expirationTime">{{'您还没有开通直通卡'}}</text>
				</view>
			</view>
			<view v-if="!isExpirationTime" class="no-expirationTime-card">
				<view class="straight-card-userinfo">
					<image class="headPortrait" :src="imgPath + userinfo.user.avatar" mode="aspectFill"></image>
					<view class="userName-view"><text class="userName">{{userinfo.user.userName}}</text>
						<view class="straight-card-subhead">
							<!-- {{isExpirationTime?'月卡已过期':userinfo.cardUserType==1?'月卡使用中':userinfo.cardUserType==2?'半年卡使用中':userinfo.cardUserType==3?'年卡使用中':userinfo.cardUserType==4?'体验卡使用中':'月卡已过期'}} -->
							{{residueDay?(userinfo.cardName+'使用中'):'月卡已过期'}}
						</view>
					</view>
					<text
						class="straight-card-expirationTime">{{'有效期至'+userinfo.cardtime.split(' ')[0].split('-').join('.')+'，还剩'+residueDay+'天'}}</text>
					<view class="straight-card-userinfo-renew" @click="gotoRenewPage(userinfo.cardUserType,false)">续费
					</view>
				</view>
				<view class="no-expirationTime-card-info-view">
					<text>{{userinfo.cardNumber}}</text>
					<text>剩余可雇佣(人)</text>
				</view>
				<view class="no-expirationTime-card-info-view">
					<view class="no-expirationTime-card-info-view-view">
						<text>{{everyDayStaff-cardOfNumber<0?0:everyDayStaff-cardOfNumber}}</text>
						<view @click="gotoRenewPage(userinfo.cardUserType,true)"
							class="no-expirationTime-card-info-view-addNumber">{{'添加人数 >'}}</view>
					</view>
					<text>单日最高可雇佣(人)</text>
				</view>
			</view>
		</view>
		<view class="taocan-info" v-if="MonthCard_list.length!=0&&isExpirationTime">
			<text class="taocan-info-title">请选择套餐</text>
			<view :class="selectItem.id==item.id ? 'month-card-info-selected':'month-card-info-select'"
				v-for="(item,index) in MonthCard_list" :key="item.id"
				@click="monthCardSelect(item.id,item.Price,item.levelName)">
				<view class="month-card-info-right-title">
					<text class="zhekou">{{item.zhekou?item.zhekou+'折':''}}</text>
					<text class="renshu">{{item.imgstwo}}元/{{item.levelName.slice(0,item.levelName.length-1)}}</text>
				</view>
				<text class="month-card-info-title">{{'尊享'+item.levelName}}</text>
				<text class="month-card-info-introduce"> · 使用周期{{item.duration}}天</br> · 可雇佣{{item.numberPeople}}人，<text
						style="color: #000000;font-weight: Bold;">{{Math.round((item.Price/item.numberPeople)*10)/10}}元/人</text></br>
					· 单日最高可雇佣{{item.levelNubmer}}人</br>
				</text>
				<view class="month-card-info-right">
					<text>{{item.Price==youhuiPrice?isShowPrice:item.Price}}</text>元/{{item.levelName.slice(0,item.levelName.length-1)}}
					<view v-if="item.id==1&&isNewMonthCardUser" class="month-card-info-right-youhui">
						<image src="../../static/icon3/youhui123rewdsf.png" mode="aspectFill"></image>
						<text>最高送100元优惠券</text>
					</view>
					<view v-if="item.id==1 && isCoupon618==='1'" class="month-card-info-right-youhui">
						<image src="../../static/icon3/youhui123rewdsf.png" mode="aspectFill"></image>
						<text>{{text618}}</text>
						<!-- 特惠赠送108元优惠券 -->
					</view>
				</view>
			</view>
		</view>
		<view class="month-card-jiayoubao" v-if="!isExpirationTime">
			<text class="month-card-jiayoubao-title">直通卡加量包</text>
			<view class="month-card-jiayoubao-subhead">
				<image class="month-card-jiayoubao-title-imag" src="../../static/icon3/tanhao21345t5eryerw.png"
					mode="aspectFill"></image>
				<text>请在直通卡有效期内购买并使用</text>
			</view>
			<view class="month-card-jiayoubao-list-view">
				<view class="month-card-jiayoubao-list" v-for="(item,index) in refuelList" :key="item.id"
					:style="{opacity:userinfo.cardJarid.split(',').includes(item.id+'')?'0.5':'1'}">
					<view class="month-card-jiayoubao-identifying"><text>限购1次</text></view>
					<view class="month-card-jiayoubao-text-view">
						<text>{{item.numberPeople}}人</text>
						<text>剩余可雇佣+{{item.numberPeople}}</text>
						<view><text>{{item.dosagePrice}}元</text><text>{{item.numberPeople*10}}元</text></view>
					</view>
					<view class="month-card-jiayoubao-button" @click="buy_jiayoubao(item)"
						:class="[userinfo.cardJarid.split(',').includes(item.id+'')?'month-card-jiayoubao-button-buy':'month-card-jiayoubao-button-Not-to-buy']">
						{{userinfo.cardJarid.split(',').includes(item.id+'')?'已购':'购买'}}
					</view>
				</view>
			</view>
		</view>
		<view class="month-card-explain">
			<text class="taocan-info-title">直通卡规则</text>
			<text class="month-card-explain-subhead">适用范围</text>
			<text class="month-card-explain-text">本卡适用于任何任务；</br>本卡使用不限城市；</text>
			<text class="month-card-explain-subhead">使用限制</text>
			<text class="month-card-explain-text">月卡单日最高可雇佣30人；半年卡单日最高可雇佣60人；年卡单日最高可雇佣90人；</text>
			<text class="month-card-explain-subhead">套餐生效</text>
			<text
				class="month-card-explain-text">1-套餐购买后生效，月卡30天内可用，半年卡180天内可用，年卡365天内可用；</br>2-套餐卡可续费，时间周期可覆盖，套餐次数可叠加。（月卡使用周期内续费套餐，续费套餐与原套餐叠加，使用周期重新计算）；</br>3-套餐卡可续费同类型或更高类型套餐卡，不可续费低类型套餐卡；</br>4-加量包购买后生效，使用时效为正在使用的套餐时效，时效结束，加量包失效。单个加量包不可重复购买；</text>
			<text class="month-card-explain-subhead">退款规则</text>
			<text class="month-card-explain-text">套餐生效后，不支持更换套餐或退款；</text>
		</view>
		<view class="hg-128"></view>
		<view class="buy-button" v-if="selectItem.id!=undefined&&isExpirationTime" @click="buy()">
			<text>
				{{(selectItem.Price?selectItem.Price:'158')+'元开通尊享'+selectItem.name}}
			</text>
		</view>
		<ChangePay @closePayPage='closePayPage' v-if="isShowPay"
			:title='`${MonthCard_list.length!=0&&isExpirationTime?payInfo:payInfo2}`' :monery='straightCardPay_price'
			:unsealId='unsealId' :carddosageId='requestObj.carddosageId'
			:url="`${MonthCard_list.length!=0&&isExpirationTime?$api.v1_Buy_monthly_card:$api.v1_number_of_buyers}`"
			keyWorld='commodityPrice' :contnet="requestObj" isJson='0' buycode=1 @paySuccess='paySuccess'>
		</ChangePay>
	</view>
</template>
<script>
	import {
		getUserInfo,
		getMonthCardInfo_card_list,
		isToExceedTheTime,
		isResidueTimeByDay,
		get_refuel_list,
		Card_of_Number,
	} from '@/libs/unit.js'
	export default {
		data() {
			return {
				unsealId: 0,
				payInfo: '',
				payInfo2: ` 1.加量包即时生效（请在有效期内使用）
						 2.加量包购买不可退还 
						 `,
				straightCardPay_id: 0,
				straightCardPay_price: 0,
				isExpirationTime: true,
				imgPath: '',
				userinfo: {},
				MonthCard_list: [],
				selectItem: {},
				serviceCharge: 5,
				isNewMonthCardUser: false,
				isShowPay: false,
				refuelList: [],
				residueDay: 0,
				everyDayStaff: 0,
				isCommodityStyle: 0,
				cardOfNumber: 0,
				isShowPrice: 0,
				originalPrice: 0,
				youhuiPrice: 0,
				tempTrade: '',
				isCoupon618: '',
				text618: '',
				requestObj: {
					carddosageId: '',
					cardId: ''
				},
				cardName: '',
				levelName: '',
			}
		},
		watch: {
			isShowPrice() {
				if (this.isShowPrice != 0 && this.youhuiPrice < this.isShowPrice) {
					if (this.isShowPrice == this.ioriginalPrice) {
						setTimeout(() => {
							this.isShowPrice -= 1
						}, 2000)
					} else {
						setTimeout(() => {
							this.isShowPrice -= 1
						}, 20)
					}
				}
			},
			'straightCardPay_id': {
				handler(n, l) {
					console.log(n, 88888)
					this.requestObj.carddosageId = n
					this.requestObj.cardId = n
					// this.payInfo = `1.当月生效，有效期${([1,9].includes(n)&&'30天')||([2,10].includes(n)&&'半年时间')||([3,11].includes(n)&&'1年时间')||([12].includes(n)&&'5天体验') }
					//                 2.直通卡购买不可退还`
					this.payInfo = `1.当月生效，有效期${(this.levelName=='月卡'&&'30天')||(this.levelName=='半年卡'&&'半年时间')||(this.levelName=='年卡'&&'1年时间')}
					                2.直通卡购买不可退还`
				},
				deep: true,
				immediate: true
			}
		},
		beforeMount() {
			// this.getUserInfo()
			// if(uni.getStorageSync('isHavePayPassword') == true) this.requestObj.payType = 2
		},
		methods: {
			// 获取当前用户信息
			async getUserInfo() {
				let res = await this.$fetch(this.$api.get_current_user, {}, 'GET')
				if (res.code) return uni.showToast({
					title: res.msg,
					icon: 'none'
				})
				//console.log(res.data)
				uni.setStorageSync('userInfo', res.data)
				this.userInfo = res.data
				if (res.data.payPwdFlag) {
					uni.setStorageSync('isHavePayPassword', true)
				} else {
					uni.setStorageSync('isHavePayPassword', false)
				}
				// if (this.userInfo.amount != 0) {
				// 	this.requestObj.payType = 2
				// }
			},
			paySuccess() {
				uni.navigateTo({
					url: '/pages/bossMonthCard/straightCardPaySucceed?type=' + 1
				})
			},
			pageInit() {
				getUserInfo()
				this.imgPath = uni.getStorageSync('imgPath')
				this.userinfo = uni.getStorageSync('userInfo')
				this.serviceCharge = uni.getStorageSync('property_list_by_type').bondS[this.userinfo.user.level - 1]
				this.isNewMonthCardUser = this.userinfo.cardUserType == 0 && this.userinfo.cardtime == null || this
					.userinfo.cardUserType == 4
				this.MonthCard_list.splice(0, this.MonthCard_list.length)
				this.$nextTick(function() {
					getMonthCardInfo_card_list().then((v) => {
						v.forEach(c => {
							if (c.id == 4) return
							if (this.userinfo.cardUserType == c.id) {
								this.everyDayStaff = c.levelNubmer
							}
							if (c.id == 1) {
								this.originalPrice = this.isNewMonthCardUser ? parseInt(c
									.imgsone) : 0
								this.youhuiPrice = this.isNewMonthCardUser ? parseInt(c
									.cardPrice) : 0
								this.isShowPrice = this.originalPrice
							}
							c.Price = this.isNewMonthCardUser ? parseInt(c.cardPrice) : parseInt(c
								.imgsone)
							c.zhekou = Math.round((c.Price / (c.numberPeople * this
								.serviceCharge) * 10) * 10) / 10
							this.MonthCard_list.push(c)
						})
						uni.setStorageSync('MonthCard_list', this.MonthCard_list)
						this.straightCardPay_id = this.MonthCard_list[1].id
						this.straightCardPay_price = this.MonthCard_list[1].Price
						this.$set(this.selectItem, 'id', this.MonthCard_list[1].id)
						this.$set(this.selectItem, 'Price', this.MonthCard_list[1].Price)
						this.$set(this.selectItem, 'name', this.MonthCard_list[1].levelName)
					})
					get_refuel_list().then((v) => {
						this.refuelList = v
					})
				})
				if (this.isNewMonthCardUser) {
					this.isExpirationTime = true
				} else {
					this.isExpirationTime = isToExceedTheTime(this.userinfo.cardtime)
				}
				if (!this.isExpirationTime) {
					this.residueDay = isResidueTimeByDay(this.userinfo.cardtime)
				}
				Card_of_Number().then(v => {
					this.cardOfNumber = v.data
				})
			},
			monthCardSelect(id, Price, name) {
				this.levelName = name
				this.straightCardPay_id = id
				this.straightCardPay_price = Price
				this.$set(this.selectItem, 'id', id)
				this.$set(this.selectItem, 'Price', Price)
				this.$set(this.selectItem, 'name', name)
			},
			gotoRenewPage(flag, isAdd) {
				uni.navigateTo({
					url: '/pages/bossMonthCard/straightCardRenew?flag=' + flag + '&isAdd=' + isAdd
				})
			},
			closePayPage() {
				this.isShowPay = false
			},
			buy() {
				this.isCommodityStyle = 0
				this.isShowPay = true
			},
			buy_jiayoubao(item) {
				if (!this.userinfo.cardJarid.split(',').includes(item.id.toString())) {
					this.isCommodityStyle = 1
					this.straightCardPay_id = item.id
					this.straightCardPay_price = item.dosagePrice
					this.isShowPay = true
				} else {
					uni.showToast({
						title: '当前有效期内仅可购买一次哦～',
						icon: 'none'
					})
				}
			},
			goToPaySucceedPage() {
				uni.navigateTo({
					url: '/pages/bossMonthCard/straightCardPaySucceed?isFirstBuy=' + this.isNewMonthCardUser
				})
			},
			async deliverToken() {
				let res = await this.$fetch(this.$api.activitySettlement6183, {}, 'GET')
			},
			async isCoupon() {
				let res = await this.$fetch(this.$api.card_list618, {}, 'GET')
				if (res.code) return;
				this.isCoupon618 = res.rows[0].gift618
				this.text618 = res.rows[0].gift618Msg
			},
		},
		onLoad() {
			this.pageInit()
			console.log(111, this.straightCardPay_id);
		},
		onShow() {
			this.deliverToken()
			this.isCoupon()
			setTimeout(() => {
				uni.setStorageSync('wxTempTrade', plus.runtime.arguments)
				console.log('plus.runtime.arguments', plus.runtime.arguments)
			}, 10)
		},
		onBackPress() {
			var pages = getCurrentPages(); // 当前页面
			var beforePage = pages[pages.length - 2]; // 前一个页面
			if (beforePage.route != "pages/app-employer/send-job/send-job") {
				uni.redirectTo({
					url: '/pages/my/newMy'
				})
				return true
			}
		},
	}
</script>
<style lang="less" scoped>
	.title-bg {
		width: 750rpx;
		height: 244rpx;
		background-color: #1F263F;
	}

	.expirationTime-card {
		width: 690rpx;
		height: 200rpx;
		margin: 0 auto;
		position: relative;
		top: 45rpx;
		background-image: url(../../static/icon3/768978yuhjh.png);
		background-repeat: round;
	}

	.no-expirationTime-card {
		width: 690rpx;
		height: 360rpx;
		margin: 0 auto;
		position: relative;
		top: 45rpx;
		background-image: url(../../static/icon3/45678yugg.png);
		background-repeat: round;
	}

	.month-card-jiayoubao {
		width: 690rpx;
		height: 480rpx;
		background: #FFFFFF;
		border-radius: 12rpx;
		margin: 180rpx auto 20rpx auto;
	}

	.straight-card-userinfo {
		height: 96rpx;
		position: relative;
		top: 52rpx;
		left: 24rpx;
	}

	.headPortrait {
		width: 96rpx;
		height: 96rpx;
		border-radius: 50%;
	}

	.userName {
		font-size: 40rpx;
		font-weight: bold;
		color: #FFFFFF;
		line-height: 45rpx;
	}

	.straight-card-expirationTime {
		font-size: 24rpx;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 45rpx;
		margin-left: 20rpx;
	}

	.straight-card-subhead {
		// width: 100rpx;
		white-space: nowrap;
		padding: 0 17rpx;
		height: 32rpx;
		background-color: rgba(0, 0, 0, .3);
		border-radius: 16rpx;
		display: inline-block;
		margin-left: 12rpx;
		text-align: center;
		font-size: 20rpx;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 32rpx;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
	}

	.userName-view {
		display: inline-block;
		position: absolute;
		margin-left: 20rpx;
	}

	.taocan-info {
		margin: 32rpx 30rpx 20rpx 30rpx;
		width: 690rpx;
		background-color: #FFFFFF;
		border-radius: 12rpx;
		padding-bottom: 14rpx;
	}

	.taocan-info-title {
		display: inline-block;
		font-size: 32rpx;
		font-weight: bold;
		color: #000000;
		line-height: 45rpx;
		margin: 32rpx 24rpx;
	}

	.month-card-info-select {
		width: 642rpx;
		height: 272rpx;
		background: #FFFFFF;
		border: 4rpx solid #F2F2F2;
		border-radius: 12rpx;
		margin: 0 24rpx 20rpx 24rpx;
	}

	.month-card-info-selected {
		width: 642rpx;
		height: 272rpx;
		background: #FFFFFF;
		border: 4rpx solid #FE4B28;
		box-shadow: 0px 0px 20rpx 0px rgba(254, 75, 40, 0.2);
		border-radius: 12rpx;
		margin: 0 24rpx 20rpx 24rpx;
	}

	.month-card-explain {
		width: 690rpx;
		background: #FFFFFF;
		border-radius: 12rpx;
		margin: 0 30rpx;
		padding-bottom: 1px;
	}

	.month-card-explain-subhead {
		display: block;
		font-size: 28rpx;
		font-weight: 500;
		color: #000000;
		line-height: 48rpx;
		margin: 0 25rpx 20rpx 25rpx;
	}

	.month-card-explain-text {
		display: block;
		font-size: 24rpx;
		font-weight: 500;
		color: #515151;
		line-height: 44rpx;
		margin: 0 25rpx 32rpx 25rpx;
	}

	.buy-button {
		width: 750rpx;
		height: 88rpx;
		background: linear-gradient(-90deg, #FF5628, #FF231C);
		text-align: center;
		position: fixed;
		bottom: 0;

		&>text {
			font-size: 32rpx;
			font-weight: bold;
			color: #000000;
			line-height: 88rpx;
			background: linear-gradient(-90deg, #FEDBBA 0%, #FFF8EB 99.12109375%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}
	}

	.month-card-info-right-title {
		// width: 202rpx;
		height: 48rpx;
		background: linear-gradient(45deg, #111832, #343B54);
		border-radius: 0px 12rpx 0px 12rpx;
		position: relative;
		float: right;

		.zhekou {
			font-size: 28rpx;
			font-weight: 500;
			color: #FCC928;
			line-height: 48rpx;
			margin-left: 18rpx;
		}

		.renshu {
			font-size: 24rpx;
			font-weight: 400;
			text-decoration: line-through;
			color: #FFFFFF;
			line-height: 48rpx;
			margin-left: 10rpx;
			margin-right: 18rpx;
		}
	}

	.month-card-info-title {
		margin-top: 32rpx;
		margin-left: 28rpx;
		display: block;
		font-size: 32rpx;
		font-weight: bold;
		color: #000000;
		line-height: 45rpx;
	}

	.month-card-info-introduce {
		margin-top: 32rpx;
		margin-left: 28rpx;
		display: block;
		font-size: 24rpx;
		font-weight: 500;
		color: #515151;
		line-height: 41rpx;
		position: relative;
		float: left;
	}

	.month-card-info-right {
		position: relative;
		float: right;
		margin-top: 32rpx;
		font-size: 24rpx;
		font-weight: 500;
		color: #515151;
		line-height: 45rpx;
		margin-right: 24rpx;

		&>text {
			font-size: 66rpx;
			font-weight: bold;
			color: #FE4B28;
			line-height: 45rpx;
			margin-right: 8rpx;
		}
	}

	.month-card-info-right-youhui {
		width: 270rpx;
		height: 28rpx;
		background-color: rgba(254, 74, 40, .2);
		border-radius: 4rpx;
		margin-top: 30rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		font-size: 24rpx;
		font-weight: 500;
		color: #FE4B28;
		position: absolute;
		right: 0rpx;

		&>image {
			width: 22rpx;
			height: 22rpx;
		}
	}

	.opacityStyle {
		opacity: .6;
	}

	.no-expirationTime-card-info-view {
		width: 315rpx;
		margin-top: 120rpx;
		margin-left: 24rpx;
		display: flex;
		flex-direction: column;
		float: left;

		&>text:nth-child(1) {
			font-size: 32rpx;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 60rpx;
		}

		&>text:nth-child(2) {
			font-size: 28rpx;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 60rpx;
			.opacityStyle;
		}
	}

	.no-expirationTime-card-info-view-view {
		display: flex;
		flex-direction: row;
		align-items: center;

		&>text:nth-child(1) {
			font-size: 32rpx;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 60rpx;
			margin-right: 12rpx;
		}
	}

	.no-expirationTime-card-info-view-addNumber {
		width: 120rpx;
		height: 32rpx;
		border: 1rpx solid #FFFFFF;
		border-radius: 25rpx;
		font-size: 20rpx;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 32rpx;
		text-align: center;
		.opacityStyle;
	}

	.month-card-jiayoubao-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #000000;
		line-height: 45rpx;
		display: inline-block;
		margin: 32rpx 0 18rpx 24rpx;
	}

	.month-card-jiayoubao-subhead {
		margin-left: 24rpx;
		display: flex;
		align-items: center;

		&>text {
			font-size: 28rpx;
			font-weight: 400;
			color: #515151;
			line-height: 45rpx;
			margin-left: 8rpx;
		}
	}

	.month-card-jiayoubao-title-imag {
		width: 28rpx;
		height: 28rpx;
	}

	.month-card-jiayoubao-list-view {
		width: 630rpx;
		height: 292rpx;
		margin: 33rpx auto 0rpx auto;
		display: flex;
		flex-direction: row;
		overflow: auto;
		-webkit-scrollbar: none;
	}

	.month-card-jiayoubao-list-view::-webkit-scrollbar {
		display: none;
		width: 0 !important;
		height: 0 !important;
		-webkit-appearance: none;
		background: transparent;
	}

	.month-card-jiayoubao-list {
		width: 220rpx;
		height: 292rpx;
		background: #FEF4D4;
		border-radius: 12rpx;
		margin-right: 20rpx;
		display: flex;
		flex-direction: column;
		flex-shrink: 0;
	}

	.month-card-jiayoubao-identifying {
		// width: 88rpx;
		height: 32rpx;
		background-color: #FCC928;
		border-radius: 12rpx 0 12rpx 0;
		display: flex;
		align-self: flex-start;
		justify-content: center;
		align-items: center;

		&>text {
			padding: 0 10rpx;
			font-size: 20rpx;
			font-weight: 500;
			color: #280600;
			line-height: 45rpx;
		}
	}

	.month-card-jiayoubao-text-view {
		height: 155rpx;
		width: 200rpx;
		// margin: 16rpx auto 0 auto;
		margin: 20rpx auto 0 auto;
		border-bottom: 1rpx dashed #B8A791;
		display: flex;
		flex-direction: column;
		align-items: center;

		&>text:nth-child(1) {
			font-size: 36rpx;
			font-weight: bold;
			color: #280600;
			line-height: 45rpx;
		}

		&>text:nth-child(2) {
			font-size: 20rpx;
			font-weight: 500;
			color: #725A4E;
			line-height: 45rpx;
		}

		&>view {
			&>text:nth-child(1) {
				font-size: 24rpx;
				font-weight: bold;
				color: #FE4B28;
				line-height: 45rpx;
			}

			&>text:nth-child(2) {
				margin-left: 8rpx;
				font-size: 24rpx;
				font-weight: 500;
				text-decoration: line-through;
				color: #725A4E;
				line-height: 45rpx;
			}
		}
	}

	.month-card-jiayoubao-button {
		width: 140rpx;
		height: 48rpx;
		border-radius: 24rpx;
		font-size: 28rpx;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 48rpx;
		text-align: center;
		margin: 20rpx auto 12rpx auto;
	}

	.month-card-jiayoubao-button-Not-to-buy {
		background: linear-gradient(45deg, #FF5628, #FF231C);
	}

	.month-card-jiayoubao-button-buy {
		width: 136rpx;
		height: 44rpx;
		border: 2px solid #FE352F;
		color: #FF231C;
	}

	.straight-card-userinfo-renew {
		width: 144rpx;
		height: 60rpx;
		background: linear-gradient(-90deg, #FEDBBA, #FFF8EB);
		position: relative;
		float: right;
		border-radius: 50rpx 0 0 50rpx;
		font-size: 28rpx;
		text-align: center;
		font-weight: 500;
		color: #FF201A;
		line-height: 60rpx;
		top: 18rpx;
		right: 24rpx;
	}
</style>